.my_referral {
    .my_referral_content {
        padding: 0 4.5333vw;
        border-top: .2667vw solid var(--main-split);

        .referral_box {
            padding-top: 4.2667vw;

            .not_guild {
                height: 24vw;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    font-size: 3.4667vw;
                    color: var(--secondary-middle-text);
                }
            }

            .title {
                font-weight: 500;
                font-size: 2.9333vw;
                color: var(--secondary-middle-text);
            }

            .referral_list {
                padding: 3.4667vw 0;

                .d_inline_block {
                    display: inline-block;
                }

                .scroll_content {
                    padding-bottom: 0;
                    display: inline-flex;
                    flex-wrap: nowrap;
                    width: auto;
                }

                .referral_item {
                    margin-left: 3.4667vw;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    .avatar {
                        width: 12.2667vw;
                        height: 12.2667vw;
                        border-radius: 50%;
                    }

                    .name {
                        margin-top: 1.8667vw;
                        font-weight: 500;
                        font-size: 2.9333vw;
                        color: var(--font-color);
                    }

                    &:first-child {
                        margin-left: 0;
                    }
                }
            }
        }


        .referral_code_box {
            margin-top: 5.066667vw;

            .title {
                font-weight: 700;
                font-size: 3.4667vw;
                color: var(--font-color);
            }

            .desc {
                margin-top: 1.6vw;
                font-weight: 500;
                font-size: 2.9333vw;
                color: var(--secondary-middle-text);
            }

            .code {
                margin-top: 8.5333vw;
                text-align: center;
                font-weight: 700;
                font-size: 6.4vw;
                color: var(--main-text);
            }

            .btn {
                width: 53.3333vw;
                height: 9.6vw;
                display: flex;
                justify-content: center;
                align-items: center;
                background: var(--primary-bg);
                border-radius: 2.1333vw;
                backdrop-filter: blur(17.5PX);
                margin: 12.8vw auto 0;
                border: .2667vw solid var(--input-border);

                span {
                    font-weight: 700;
                    font-size: 4.2667vw;
                    color: #fff;
                }
            }
        }
    }
}


@media screen and (min-width:1280px) {
    .my_referral {
        .my_referral_content {
            padding: 0 21.3065px;
            border-top: 1.2535px solid var(--main-split);

            .referral_box {
                padding-top: 20.0535px;

                .not_guild {
                    height: 112.8px;

                    span {
                        font-size: 16.2935px;
                    }
                }

                .title {
                    font-size: 13.7865px;
                }

                .referral_list {
                    padding: 16.2935px 0;

                    .referral_item {
                        margin-left: 16.2935px;

                        .avatar {
                            width: 57.6535px;
                            height: 57.6535px;
                        }

                        .name {
                            margin-top: 8.7735px;
                            font-size: 13.7865px;
                        }
                    }
                }
            }


            .referral_code_box {
                margin-top: 23.8133px;

                .title {
                    font-size: 16.2935px;
                }

                .desc {
                    margin-top: 7.52px;
                    font-size: 13.7865px;
                }

                .code {
                    margin-top: 40.1065px;
                    font-size: 30.08px;
                }

                .btn {
                    width: 250.6665px;
                    height: 45.12px;
                    border-radius: 10.0265px;
                    margin: 60.16px auto 0;
                    border: 1.2535px solid var(--input-border);

                    span {
                        font-size: 20.0535px;
                    }
                }
            }
        }
    }

}